<template>
  <div class="body">
    <el-card>
      <div class="title">动态管理</div>
      <el-form :inline="true" :model="formData">
        <el-form-item label="公司名称:">
          <el-input size="mini" v-model="formData.name" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="动态内容:">
          <el-input size="mini" v-model="formData.state" placeholder="请输入动态内容"></el-input>
        </el-form-item>
        <el-form-item label="审批状态:">
          <el-select size="mini" v-model="formData.status" placeholder="请选择审批状态" clearable>
            <el-option v-for="(item, index) in options" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="mini" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table height="500" :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="avatar" align="center" label="公司头像" width="150">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px; border-radius: 50%" :src="scope.row.avatar"
              :preview-src-list="[`${scope.row.avatar}`]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip align="center" label="公司名称" width="250">
        </el-table-column>
        <el-table-column prop="state" show-overflow-tooltip align="center" label="动态内容" width="450">
        </el-table-column>
        <el-table-column prop="stateUrl" show-overflow-tooltip align="center" label="动态图片" width="250">
          <template slot-scope="scope">
            <el-image v-for="(item, index) in scope.row.stateUrl" :key="index" style="
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin-right: 10px;
              " :src="item" :preview-src-list="scope.row.stateUrl">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="审批状态" width="150">
          <template slot-scope="scope">
            <span :style="{
              color:
                scope.row.status == 2
                  ? '#26db6f'
                  : scope.row.status == 3
                    ? '#ff0000'
                    : '#333',
            }">{{
                scope.row.status == 1
                  ? "待审批"
                  : scope.row.status == 2
                    ? "审批通过"
                    : "审批未通过"
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button :disabled="scope.row.status == 2" @click="approve(scope.row)" type="text"
              size="small">审批通过</el-button>
            <el-button :disabled="scope.row.status == 3" @click="reApprove(scope.row)" type="text"
              size="small">审批拒绝</el-button>
            <el-button @click="deleteApp(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="currentPage.page" :page-sizes="[5, 10, 15, 20]"
        :page-size="currentPage.pageSize" layout="total,->, sizes, prev, pager, next, jumper"
        :total="currentPage.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getStateList, approveState } from "@/api/state";
export default {
  data() {
    return {
      formData: {
        name: "",
        state: "",
        status: "",
      },
      options: [
        {
          label: "待审批",
          value: 1,
        },
        {
          label: "审批通过",
          value: 2,
        },
        {
          label: "审批不通过",
          value: 3,
        },
      ],
      tableData: [],
      currentPage: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    async search() {
      let data = { ...this.formData, ...this.currentPage };
      const res = await getStateList(data);
      if (res.status != 0) {
        this.$message.error(res.message);
      }
      this.tableData = res.data.data;
      this.tableData.forEach((item) => {
        item.stateUrl = JSON.parse(item.stateUrl);
      });
      this.currentPage.total = res.data.total;
    },
    async approve(row) {
      console.log(row.id);
      this.$confirm("确定审批通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            id: row.id,
            status: 2,
          };
          let res = await approveState(data);
          console.log(res);
          if (res.status == 0) {
            this.$message.success("已审批!");
            this.search();
          }
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    async reApprove(row) {
      this.$confirm("确定审批未通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            id: row.id,
            status: 3,
          };
          let res = await approveState(data);
          console.log(res);
          if (res.status == 0) {
            this.$message.success("已审批!");
            this.search();
          }
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage.page = val;
      this.search();
    },
  },
  created() {
    this.search();
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding: 20px;
  // height: 100vh;
  background: #f5f7fa;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }
}
</style>
